<template>
  <el-container>
    <el-aside>
      <div class="logo-box" style="flex">
        <el-image
          ref="aaa"
          style="width: 35px; height: 35px"
          :src="imgurl"
          @click="chan"
        ></el-image>
        <h2 id="manage-title" v-show="!flag">后台管理</h2>
      </div>
      <MenuCom :isCollapse="flag" />
    </el-aside>
    <el-container>
      <el-header
        ><el-icon @click="flag = !flag" :size="30"
          ><component :is="check"></component
        ></el-icon>
        <div class="avatar-box">
          <el-space :size="30">
            <span>欢迎您:&nbsp;&nbsp;{{ userInfo?.adminname }}</span>
            <el-dropdown>
              <el-avatar
                :size="30"
                src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
              />
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>设置</el-dropdown-item>
                  <el-dropdown-item divided @click="homeOut">
                    退出
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </el-space>
        </div>
      </el-header>
      <el-main>
        <Breadcrumb></Breadcrumb>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
import { Check, Expand, Fold } from '@element-plus/icons-vue'
import { mapState, mapMutations } from 'vuex'
import MenuCom from '@/components/MenuCom.vue'
import imgurl from '@/assets/2-1.jpg'
import Breadcrumb from '../components/BreadcrumbCom.vue'
export default {
  data() {
    return {
      flag: false,
      imgurl
    }
  },
  computed: {
    ...mapState(['userInfo']),
    asideWidth() {
      return !this.flag ? '200px' : '64px'
    },
    check() {
      return this.flag ? Expand : Fold
    }
  },
  components: {
    Check,
    MenuCom,
    Breadcrumb
  },
  methods: {
    ...mapMutations(['upfdataUserInfo']),
    homeOut() {
      localStorage.removeItem('token')
      this.upfdataUserInfo({})
      this.$router.push('/login')
    },
    chan() {
      // this.$refs.aaa.style.position = 'fixed'
      // this.$refs.aaa.style.width = '600px'
      // this.$refs.aaa.style.height = '600px'
      console.log(this.$refs.aaa)
    }
  }
}
</script>
<style lang="scss" scoped>
.logo-box {
  display: flex;
  margin: 20px 0;
  .el-image {
    width: 35px;
    height: 35px;
    margin-left: 15px;
  }
  #manage-title {
    font-size: 20px !important;
    color: #fff;
    margin: 0 15px;
    white-space: nowrap;
    overflow: hidden;
    width: 80px;
    height: 35px;
  }
}

.el-container {
  height: 100%;
  background-color: #dfe6e9;
  .el-aside {
    font-size: 32px;
    width: v-bind(asideWidth);
    background-color: #2d3436;
    transition: 1s;
  }
  .el-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #7f8fa6;
  }
}
.el-menu {
  border-right: none;
}
.el-main {
  overflow: hidden;
}
</style>
